<template>
    <div>
        <div >
            <el-card shadow="hover">

        <div style="width: 100%;margin-left: 10px;">
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-form-item label="X路号码:">
                        <el-input v-model="searchForm.xtypeNum" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="落地X路:">
                        <el-select v-model="searchForm.fallX" placeholder="请选择" @change="getRecords" filterable>
                            <el-option v-for="item in fallXGroup" :key="item.value + item.label" :label="item.label"
                                :value="item.label">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="区 域:">
                        <el-input v-model="searchForm.area" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="省:">
                        <el-input v-model="searchForm.province" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="getRecords"><el-icon>
                            <Search />
                        </el-icon>查询</el-button>
                    <el-button type="info" @click="clearData"><el-icon>
                            <Close />
                        </el-icon>清空</el-button>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="16">
                    <!-- <el-button type="success" @click="addTableData"><el-icon>
                            <Plus />
                        </el-icon>添加</el-button> -->
                    <!-- <el-button type="primary"> <el-icon>
                            <Aim />
                        </el-icon>锁定</el-button> -->
                    <el-button type="primary" @click="importDialogVisible = true" v-if="permissionStore.isPermissionsBtn('011003001')"> <el-icon>
                            <CopyDocument />
                        </el-icon>导入</el-button>
                    <el-button type="primary" @click="exportData" v-if="permissionStore.isPermissionsBtn('011003002')"><el-icon>
                            <DocumentRemove />
                        </el-icon>导出</el-button>
                    <el-button type="danger" @click="removeTableData" v-if="permissionStore.isPermissionsBtn('011003003')">
                        <el-icon>
                            <Delete />
                        </el-icon>批量删除</el-button>
                    <el-button type="success" @click="setMutiCount" v-if="permissionStore.isPermissionsBtn('011003004')"> <el-icon>
                            <Odometer />
                        </el-icon>并发数</el-button>
                    <el-button type="primary" @click="isApplyData" v-if="permissionStore.isPermissionsBtn('011003005')"><el-icon>
                            <Check />
                        </el-icon>应用</el-button>
                    <el-button type="info" @click="setDefaultArea" v-if="permissionStore.isPermissionsBtn('011003006')"><el-icon>
                            <Position />
                        </el-icon>默认区域</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="mt10">
            <el-table :data="tableData" style="width: 100%;height:60vh" stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="85" align="center" />
                <el-table-column type="index" width="80" label="序号" align="center" />
                <el-table-column prop="xtypeNum" label="X路号码" align="center" min-width="150" />
                <el-table-column prop="xcustomer" label="X路客户" align="center" min-width="150" />
                <el-table-column prop="fallX" label="落地X路" align="center" min-width="150" />
                <el-table-column prop="fallAreaCode" label="区域" align="center" min-width="100" />
                <el-table-column prop="provinceCode" label="省" align="center" min-width="100" />
                <el-table-column prop="isLock" label="锁定" align="center" min-width="100">
                    <template #default="scope">
                        <span>{{ scope.row.isLock === '1' ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="insertTime" label="添加时间" align="center" :formatter="formatDateTime" min-width="150" />
                <el-table-column prop="insertBy" label="添加用户" align="center" min-width="150" />
                <!-- <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="warning" @click="editForm(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteForm(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
        <div style="margin-top: 20px;">
            <el-pagination style="justify-content: center;" v-model:current-page="currentPageIndex"
                v-model:page-size="pageSize" :page-sizes="[10, 500, 1000]" :background="true"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" />
        </div>
        </el-card>
    </div>

    <div>
        <el-dialog v-model="centerDialogVisible" :title="dialogTitle" width="30%" center>
            <div>
                <el-form :model="form" label-width="120px" label-position="top">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="X路号码:">
                                <el-input v-model="submitForm.xtypeNum" placeholder="请输入X路号码" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="落地X路:">
                                <el-input v-model="submitForm.fallX" placeholder="请输入落地X路" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="区域:">
                                <el-input v-model="submitForm.fallAreaCode" placeholder="请输入区域" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="省:">
                                <el-input v-model="submitForm.provinceCode" placeholder="请输入省" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="锁定:">
                                <el-select v-model="submitForm.isLock" placeholder="请选择" style="width:100%">
                                    <el-option label="是" value="1" />
                                    <el-option label="否" value="0" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="mySubmit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="setMutiVisible" width="30%" center>
            <div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="落地X路:">
                            <el-select v-model="mutiform.telWayType" placeholder="请选择" @change="getMuti" filterable>
                                <el-option v-for="item in fallXGroup" :key="item.value + item.label" :label="item.label"
                                    :value="item.label">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ item.value }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="并发总数:">
                            <el-input v-model="mutiform.mutiCount" placeholder="请输入并发数" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="setMutiVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveMuti">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="setDefaultAreaVisible" width="35%" center>
            <div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="落地X路:">
                            <el-select v-model="areaform.telWayType" placeholder="请选择" @change="getXArea" filterable>
                                <el-option v-for="item in fallXGroup" :key="item.value + item.label" :label="item.label"
                                    :value="item.label">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ item.value }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="默认区域:">
                            <!-- <el-cascader :options="options" :props="props" clearable /> -->
                            <el-input v-model="areaform.areas" placeholder="请输入默认区域(逗号隔开)" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="setDefaultAreaVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveArea">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="importDialogVisible" width="30%" center>
            <div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="新增X路:">
                            <el-switch v-model="isNewX" active-text="是" inactive-text="否" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="导入方式:">
                            <el-switch v-model="isFileIn" disabled active-text="文件" inactive-text="文本" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="落地X路:">
                            <el-select v-model="fallXSelect" placeholder="请选择" v-if="!isNewX" filterable>
                                <el-option v-for="item in fallXGroup" :key="item.value + item.label" :label="item.label"
                                    :value="item.label">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        ">{{ item.value }}</span>
                                </el-option>
                            </el-select>
                            <el-input v-model="fallXSelect" placeholder="请输入落地X路" v-else />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="锁定状态:">
                            <el-select v-model="lockVal" placeholder="请选择">
                                <el-option v-for="item in lockStatus" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div>
                    <el-upload v-if="isFileIn" class="upload-demo" drag multiple :auto-upload="false" :limit="1"
                        v-model:file-list="fileList">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text" style="height: 120px;">
                            拖拽 或 <em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                xlsx 单元格一（号码）| 单元格二（区域）| 单元格三（省） 不加表头
                            </div>
                        </template>
                    </el-upload>
                    <el-input v-else v-model="mutiXnum" :rows="15" type="textarea" placeholder="X号码 区域 省..." />
                </div>


            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="importDialogVisible = false">取消</el-button>
                    <el-button type="primary" v-if="isFileIn" @click="uploadExcel()">
                        确定
                    </el-button>
                    <el-button type="primary" v-else @click="saveAll()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref, onMounted,h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { selectPage, insert, batchDelete, getXGroup, apply, isApply, saveBatch, uploadFileWithTel, exportTelX } from "@/api/bussiness/numberX"
import { saveMutiCount, getMutiCount } from "@/api/bussiness/muti"
import { getDefaultArea, saveDefaultArea } from "@/api/bussiness/defaultArea"
import {formatDateTime} from '@/utils/index'
import {
    Delete, DocumentRemove, CopyDocument, Plus, Aim, Odometer, Check, Position, Close, Search, UploadFilled
} from '@element-plus/icons-vue'
import axios from 'axios'
import { usePermissionStore } from '@/store/modules/permission'
const permissionStore = usePermissionStore()
onMounted(() => {
    console.log('初始化');
    
    getFallXList()
    getRecords()
})

const lockStatus = ref([
    {
        label: '是',
        value: 1
    },
    {
        label: '否',
        value: 0
    }
])
const fileList = ref([])
const mutiXnum = ref("")
const submitForm = reactive({
    xid: '',
    xtypeNum: '',
    fallX: '',
    fallAreaCode: '',
    provinceCode: '',
    isLock: '',
    insertTime: '',
    insertBy: '',
})
const searchForm = reactive({
    xtypeNum: '',
    fallX: '',
    province: '',
    area: ''
})
const tableData = ref([])
const form = reactive({
    gatewayID: '',
    ip: ''
})
const fallXSelect = ref('')
const lockVal = ref('')
const pageSize = ref(10)
const ids = ref([])
const delNumbers = ref([])
// const delProvince = ref([])

const dialogTitle = ref('')
const centerDialogVisible = ref(false)
const setMutiVisible = ref(false)
const setDefaultAreaVisible = ref(false)
const multipleSelection = ref<any>([])
const currentPageIndex = ref(1)
const total = ref()
const importDialogVisible = ref(false)
const isNewX = ref(false)
const isFileIn = ref(false)
const fallXGroup = ref([])
const clearData = () => {
    searchForm.fallX = ''
    searchForm.xtypeNum = ''
    searchForm.area = ''
    searchForm.province = ''
}
const mutiform = reactive({
    mid: '',
    wayType: '',
    telWayType: '',
    mutiCount: ''
})
const areaform = reactive({
    aid: '',
    telWayType: '',
    areas: ''
})
const setMutiCount = () => {
    mutiform.telWayType = ''
    mutiform.mutiCount = ''
    setMutiVisible.value = true
}
const exportData = () => {
    if (searchForm.fallX == '') {
        ElMessage.warning('请选择需要导出的X路')
        return
    }
    const params = {
        fallX: searchForm.fallX,
    }
    exportTelX(params).then(res => {const blob = new Blob([res.data], { type: 'application/octet-stream' })// 创建Blob对象
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob); // 生成临时链接
        link.setAttribute('download', searchForm.fallX + '路X号码.xlsx'); // 设置下载文件名及格式
        document.body.appendChild(link); // 添加到DOM中
        link.click(); // 模拟点击下载
        window.URL.revokeObjectURL(link.href);
        document.body.removeChild(link); // 移除元素
        // window.open(URL.createObjectURL(blob));
    })
}
const getMuti = () => {
    mutiform.mutiCount = ''
    mutiform.mid = ''
    const params = {
        telWayType: mutiform.telWayType,
    }
    getMutiCount(params).then(res => {
        if (res.code === 200) {
            mutiform.mutiCount = res.data.mutiCount
            mutiform.mid = res.data.mid
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}

const uploadExcel = () => {
    if (fileList.value.length == 0) {
        ElMessage({
            message: '请选择文件',
            type: 'warning',
        })
        return
    }
    if (fallXSelect.value == '') {
        ElMessage({
            message: '请选择落地X路',
            type: 'warning',
        })
        return
    }
    const formData = new FormData();
    formData.append('file', fileList.value[0].raw)
    formData.append('fall', fallXSelect.value)
    formData.append('isLock', lockVal.value)
    uploadFileWithTel(formData).then(res => {
        if (res.code === 200) {
            importDialogVisible.value = false
            fileList.value = []
            fallXSelect.value = ''
            lockVal.value = ''
            isNewX.value = false
            isFileIn.value = false
            ElMessage({
                message: '添加' + res.data + '个号码',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}

const isApplyData = () => {
    isApply().then(res => {
        if (res.code === 200) {
            let hArray = []
            if (res.data.delX != null) {
                hArray.push(h('div', { style: 'color: rgb(245, 108, 108)' }, `删除${res.data.delX}个X号码`))
            }
            if (res.data.addX != null) {
                hArray.push(h('div', { style: 'color: rgb(103, 194, 58)' }, `添加${res.data.addX}个X号码`))
            }
            if (hArray.length > 0) {
                ElMessageBox({
                    title: '警告',
                    message: h('p', null, hArray),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    applyData();
                })
            }
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const applyData = () => {
    apply().then(res => {
        if (res.code === 200) {
            getRecords()
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const setDefaultArea = () => {
    areaform.telWayType = ''
    areaform.areas = ''
    setDefaultAreaVisible.value = true
}
const getXArea = () => {
    areaform.areas = ''
    //2024.3.8 bjtang 修复X路号码设置默认区域失败
    areaform.aid = ''
    const params = {
        telWayType: areaform.telWayType
    }
    getDefaultArea(params).then(res => {
        if (res.code === 200) {
            areaform.areas = res.data.areas
            areaform.aid = res.data.aid
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const saveAll = () => {
    if (fallXSelect.value == '') {
        ElMessage({
            message: '请选择落地X路',
            type: 'warning',
        })
        return
    }
    if (mutiXnum.value == '') {
        ElMessage({
            message: '请输入数据',
            type: 'warning',
        })
        return
    }
    const params = {
         fall: fallXSelect.value,
        numberList: mutiXnum.value.split('\n').filter(item => item.trim() !== ''),
        isLock: lockVal.value
        // fallA: fallXSelect.value,
        // atypeNum: mutiXnum.value,
        // isLock: lockVal.value
    }
    saveBatch(params).then(res => {
        importDialogVisible.value = false
        if (res.code === 200) {
            mutiXnum.value = ''
            fallXSelect.value = ''
            lockVal.value = ''
            isNewX.value = false
            getRecords()
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}

const getFallXList = () => {
    getXGroup().then(res => {
        if (res.code === 200) {
            fallXGroup.value = []
            res.data.forEach((item) => {
                fallXGroup.value.push({ label: item.fall_x, value: item.remark })
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}


const saveArea = () => {
    const params = {
        aid: areaform.aid,
        telWayType: areaform.telWayType,
        areas: areaform.areas,
    }
    saveDefaultArea(params).then(res => {
        setDefaultAreaVisible.value = false
        c
        if (res.code === 200) {
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })

}
const saveMuti = () => {
    const data = {
        telWayType: mutiform.telWayType,
        mutiCount: mutiform.mutiCount,
        wayType: "X",
        mid: mutiform.mid

    }
    saveMutiCount(data).then(res => {
        setMutiVisible.value = false
        c
        if (res.code === 200) {
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })

}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPageIndex.value = val
    getRecords()
}
const handleSizeChange = (val: number) => {
    currentPageIndex.value = val
    getRecords()
}
const handleSelectionChange = (val: any) => {
    ids.value = []
    delNumbers.value = []
    // delProvince.value = []
    multipleSelection.value = val
    multipleSelection.value.forEach(item => {
        ids.value.push(item.xid)
        delNumbers.value.push(item.xtypeNum + ',' + searchForm.fallX + ':' + item.provinceCode)
        // delProvince.value.push(item.provinceCode)
    })
}
const clearObj = () => {
    submitForm.xid = '',
        submitForm.xtypeNum = '',
        submitForm.fallX = '',
        submitForm.isLock = '',
        submitForm.insertTime = '',
        submitForm.insertBy = '',
        submitForm.fallAreaCode = '',
        submitForm.provinceCode = ''
}
const mySubmit = () => {
    centerDialogVisible.value = false
    const params = {
        xid: submitForm.xid,
        xtypeNum: submitForm.xtypeNum,
        fallX: submitForm.fallX,
        fallAreaCode: submitForm.fallAreaCode,
        provinceCode: submitForm.provinceCode,
        isLock: Number(submitForm.isLock),
    }
    insert(params).then(res => {
        if (res.code === 200) {
            getRecords()
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const getRecords = () => {
    const params = {
        pageNum: currentPageIndex.value,
        pageSize: pageSize.value,
        xtypeNum: searchForm.xtypeNum,
        fallX: searchForm.fallX,
        area: searchForm.area,
        province: searchForm.province
    }
    selectPage(params).then(res => {
        if (res.code === 200) {
            tableData.value = []
            total.value = res.data.total
            tableData.value.push(...res.data.records)
            tableData.value.forEach((item) => {
                if (item.isLock) {
                    item.isLock = '1'
                } else {
                    item.isLock = '0'
                }
            })
            let xcustomer_phone = []
            tableData.value.forEach(item=>{
                xcustomer_phone.push(item.xtypeNum)
            })
            // http://43.137.49.173:9999/api/v1/phone-number/query_phone_customer
            // http://192.168.1.6:9999/api/v1/phone-number/query_phone_customer
            axios.post("http://43.137.49.173:9999/api/v1/phone-number/query_phone_customer",{phone_number:xcustomer_phone}).then(res=>{
                // console.log(res.data)
                tableData.value.forEach((item: any,index) => {
                    item.xcustomer = res.data[index].customer
                    
                })
                // console.log(tableData.value)
                })
        } else {
            // tableData.value = []
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const editForm = (index: number, row: any) => {
    dialogTitle.value = '修改表单'
    centerDialogVisible.value = true
    Object.assign(submitForm, row);
}

const deleteForm = (index: number, row: any) => {
    ids.value = []
    delNumbers.value = []
    // delProvince.value = []
    // if (multipleSelection.value.length > 0) {
    ElMessageBox.confirm(
        '是否删除本条数据',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ids.value.push(row.xid)
            delNumbers.value.push(row.xtypeNum)
            // delProvince.value.push(row.provinceCode)
            batchDeleteAll()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
const addTableData = () => {
    clearObj()
    dialogTitle.value = '新增表单'
    centerDialogVisible.value = true
}
const batchDeleteAll = () => {
    if (searchForm.fallX == '') {
        ElMessage.error('请选择落地X路后安全删除')
        return;
    }
    const params = {
        deleteIds: ids.value,
        delNumbers: delNumbers.value,
        // delProvince: delProvince.value,
        // fallA: searchForm.fallX
    }
    batchDelete(params).then(res => {
        if (res.code === 200) {
            getRecords()
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        } else {
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    })
}
const removeTableData = () => {
    if (multipleSelection.value.length > 0) {
        ElMessageBox.confirm(
            '是否删除' + multipleSelection.value.length + '条数据',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                batchDeleteAll()
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    } else {
        ElMessage({
            type: 'warning',
            message: '请选择数据',
        })
    }

}

</script>

<style scoped>
.gateInput {
    width: 50px;

}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>